<template>
    <el-row style="height: 100%">
        <el-col style="height: 100%">
            <!--
                原侧边栏背景颜色
                background-color="#545c64"
            -->
        <el-menu  :default-active="this.$route.path" router class="el-menu-vertical-demo"   @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                  background-color="#2f3447"
                 text-color="#fff"
                 active-text-color="#ffd04b">
            <el-button type="text" @click="openScreenPage()" v-if="isHidden==true"><a class="logo"><img src="../../public/Logo.png"/></a></el-button>
            <el-menu-item index="/" v-if="isHidden==false">
                <i class="el-icon-s-promotion" @click="openScreenPage()"></i>
                <span slot="title">Logo</span>
            </el-menu-item>
            <el-menu-item index="/menu/main">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">Go+订单</span>
                </template>
                <el-menu-item index="/menu/order">
                    <i class="el-icon-document"></i>
                    <span slot="title">订单管理</span>
                </el-menu-item>
                <el-menu-item index="/menu/order/excel">
                    <i class="el-icon-coin"></i>
                    <span slot="title">Excel管理</span>
                </el-menu-item>
            </el-submenu>
            <el-menu-item index="/menu/data">
                <i class="el-icon-s-marketing"></i>
                <span slot="title">数据统计</span>
            </el-menu-item>
            <el-menu-item index="/menu/vip">
                <i class="el-icon-s-custom"></i>
                <span slot="title">会员管理</span>
            </el-menu-item>
            <el-menu-item index="/menu/emp">
                <i class="el-icon-user"></i>
                <span slot="title">员工管理</span>
            </el-menu-item>
            <el-menu-item index="/menu/car">
                <i class="el-icon-truck"></i>
                <span slot="title">车辆管理</span>
            </el-menu-item>
            <el-menu-item index="/menu/lock">
                <i class="el-icon-lock"></i>
                <span slot="title">权限管理</span>
            </el-menu-item>
            <el-menu-item index="/menu/setting">
                <i class="el-icon-setting"></i>
                <span slot="title">系统设置</span>
            </el-menu-item>
            <el-submenu index="7">
                <template slot="title">
                    <i class="el-icon-reading"></i>
                    <span slot="title">教程</span>
                </template>
                <el-menu-item index="/menu/read">
                    <i class="el-icon-notebook-2"></i>
                    <span slot="title">文档</span>
                </el-menu-item>
            </el-submenu>
        </el-menu>

        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "Aside",
        data() {
            return {
            }
        },
        computed:{
          isCollapse: function () {
              return this.$store.getters.getCollapse;
          },
          isHidden: function () {
              return this.$store.getters.getHidden;
          }
        },
        methods:{
            handleOpen(key, keyPath){

                console.log(key, keyPath);
            },
            handleClose(key, keyPath){
                console.log(key, keyPath);
            },
            openScreenPage() {
                let routeData = this.$router.resolve({
                    path:'/screenPage',
                });
                window.open(routeData.href, '_blank');
            },
        }
    }
</script>

<style scoped>
    .el-menu-vertical-demo{
        height: 100%;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        height: 100%;
        /**
            我的(作者)浏览器的高度
        */
    }
    .logo:hover img{
        /**
         鼠标经过图标，图标变亮
         */
        opacity: 1;
    }
    .logo img{
        filter:alpha(Opacity=70);
        -moz-opacity:0.8;
        opacity: 0.8;
        height:190px;
        width:190px;
        margin-bottom: -70px;
        margin-top: -30px;
    }
</style>
